<template>
	<MyMask v-model:showMask="showMask"></MyMask>
	<view>
		<view class="mask" v-show="changeSearchColor"></view>
		<view class="container">
			<view :class="{containerTitle:true, active: changeSearchColor}">
				<view class="search" @click="toSearch">
					<text class="iconfont icon-search"></text>
					<view>搜索商品</view>
				</view>
				<text class="iconfont icon-lingdang notification"></text>
			</view>
			<u-swiper :list="carouselList" name="img" mode="rect" height="600"></u-swiper>
			<!-- // 菜单栏 -->
			<view class="nav">
				<view class="navItem" v-for="item in navList" :key="item.id" @click="toProduct(item)">
					<image :src="item.img"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
			<!-- 推荐榜单 -->
			<view class="recommendList">
				<view class="title">
					推荐榜单
				</view>
				<view class="reccommendBox" @touchstart="touchStart" @touchend="touchEnd">
					<view class="recommendContent">
						<view class="item" v-for="item in competitiveList" :key='item._id' @click="goDetail(item)">
							<image class="goods" :src="item.img"></image>
							<view>
								<image class="icon" src="../../static/images/home/rank.png"></image>
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		
			<!-- 猜你喜欢 -->
			<view class="likeList">
				<view class="title">
					<text>猜你喜欢</text>
					<text @click="controlStyleFunction">切换{{ controlStyleFlag?'横版': '竖版' }}</text>
				</view>
				<view class="likeContent" v-if="controlStyleFlag">
					<view class="likeItem" v-for="like in likeList" :key="like._id" @click="goDetail(like)">
						<image :src="like.img"></image>
						<view class="likeItemText">
							{{like.name}}
						</view>
						<view class="likeItemPrice">
							<view class="price">
								<text>￥</text>
								<text>{{like.price.toFixed(2)}}</text>
							</view>
							<view class="sold">
								已售{{like.sales}}件
							</view>
						</view>
					</view>
				</view>
				<view class="likeContentTwo" v-else>
					<view class="likeItem" v-for="like in likeList" :key="like._id" @click="goDetail(like)">
						<view class="image">
							<image :src="like.img" mode="widthFix"></image>
						</view>
						<view class="likeItemText">
							<view class="likeItemContent">{{like.name}}</view>
							<view class="likeItemPrice">
								<view class="price">
									<text>￥</text>
									<text>{{like.price.toFixed(2)}}</text>
								</view>
								<view class="sold">
									已售{{like.sales}}件
								</view>
							</view>
						</view>
						
					</view>
				</view>
				<MyLoading v-model:lodingType="lodingType"/>
			</view>
			
		</view>
		<tarbar :current="0"></tarbar>
	</view>
</template>

<script setup>
	import { ref,reactive,computed } from 'vue'
	import {
		onShow,onLoad,onPageScroll,onReachBottom
	} from "@dcloudio/uni-app"
	import  MyLoading  from '@/components/MyLoading'
	import  MyMask  from '@/components/MyMask'
	// 底部tab栏
	import tarbar from '@/components/tarbar/tarbar.vue'
	// banner
	import getBanner from './getBanner.js'
	// 推荐
	import competitiveListFunction from './getCompetitive.js'
	// 切换喜欢样式
	import { controlStyleFlag, controlStyleFunction} from './controlStyle.js'
	let { carouselList, navList, likeList, lodingType,toProduct } = getBanner()
	let { competitiveList, touchEnd, touchStart } = competitiveListFunction()
	let showMask = computed(() => {
		return carouselList.value.length >=1 && competitiveList.value.length>=1 && likeList.value.length>=1
	})
	
	
	
	
	// 去search页面
	function toSearch() {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
	
	// 去商品详情
	function goDetail(like) {
		let { _id } = like
		uni.navigateTo({
			url: `/pages/goodsDetail/goodsDetail?goods=${_id}`
		})
	}
	
	let changeSearchColor = ref(false)
	// 导航栏换颜色
	onPageScroll((res) => {
		if(res.scrollTop > 0) {
			changeSearchColor.value = true
		}else {
			changeSearchColor.value = false
		}
	})
	
	onShow(() => {
		uni.hideTabBar({
			animation: false
		})
	})

</script>

<style lang="scss" scoped>
	.mask{
		position: fixed;
		background: rgba(255, 220, 0, 0.8);
		width: 100%;
		height: 50rpx;
		z-index: 9999;
	}
	.container{
		padding-bottom: 100rpx;
		position: relative;
		background-color: #f5f5f5;
		// 头部搜索
		.containerTitle{
			position: fixed;
			top: 50rpx;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			padding:  15rpx ;
			z-index: 999;
			.search{
				flex: 1;
				background-color: #fff;
				display: flex;
				align-items: center;
				font-size:20rpx;
				color: #a1a1a1;
				padding: 15rpx;
				border-radius: 50rpx;
				margin-right: 20rpx;
				.iconfont{
					font-size: 20rpx;
					margin: 0 15rpx;
				}
			}
			.notification{
				font-size: 35rpx;
				color: red;
				fill: red;
			}
		
			&.active{
				top: 50rpx;
				background: rgba(255, 220, 0, 0.8);
				.notification{
					color:#fff;
				}
			}
		}
	
		// nav
		.nav{
			background-color: #fff;
			margin: 20rpx;
			padding: 20rpx 10rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.navItem{
				width: 25%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image {
					width: 78rpx;
					height: 78rpx;
					margin-bottom: 15rpx;
				}
				text{
					font-size: 15rpx;
				}
			}
		}
		
		// 推荐
		.recommendList{
			padding: 15rpx;
			.title{
				margin: 20rpx 0;
				font-size: 35rpx;
				font-weight: bold;
			
			}
			.reccommendBox{
				width: 100%;
				overflow: auto;
				.recommendContent {
					display: flex;
					justify-content: space-between;
					flex-wrap: nowrap;
					.item{
						width: 32%;
						display: flex;
						flex-direction: column;
						.goods{
							width: 100%;
							height: 250rpx;
						}
						view{
							margin-top: 15rpx;
							display: flex;
							align-items: center;
							font-size: 30rpx;
							.icon{
								width: 30rpx;
								height: 30rpx;
								margin: 0 10rpx;
							}
						}
						text{
							flex: 1;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						&:nth-of-type(2n){
							margin:0 10rpx ;
						}
					}
				}
			}
			
		}
	
		.likeList{
			padding: 15rpx;
			padding-bottom: 0;
			.title{
				margin: 20rpx 0;
				font-size: 35rpx;
				font-weight: bold;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text:last-child{
					font-size: 15rpx;
					font-weight: normal;
				}
			}
			.likeContent{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.likeItem{
					width: 48%;
					padding: 15rpx 15rpx 20rpx 15rpx;
					background-color: #fff;
					display: flex;
					flex-direction: column;
					margin-bottom: 15rpx;
					border-radius: 10rpx;
					image{
						width: 100%;
						height: 350rpx;
					}
					.likeItemText{
						font-size: 30rpx;
						font-weight: 550;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					.likeItemPrice{
						margin: 15rpx 0;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.price{
							font-size: 30rpx;
							color: red;
							text:first-child{
								font-size: 20rpx;
							}
						}
						.sold{
							color: #a1a1a1;
						}
					}
				}
			}
			// 横版
			.likeContentTwo{
				.likeItem{
					display: flex;
					margin: 15rpx 0;
					background-color: #fff;
					padding: 15rpx;
					border-radius: 15rpx;
					.image{
						width:200rpx;
						border-radius: 15rpx;
						overflow: hidden;
						margin-right: 15rpx;
						image{
							width: 100%;
						}
					}
					.likeItemText{
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.likeItemContent{
							width: 100%;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 3;
							text-overflow: ellipsis;
							overflow: hidden;
							
						}
						.likeItemPrice{
							display: flex;
							justify-content: space-between;
							align-items: flex-start;
							color: #ccc;
							font-size: 20rpx;
						}
					}
				}
			}
			
		}
	}
</style>
